<template>
  <div>
    <!---遮罩-->
    <div
      v-if="modalObj.mask"
      :class="['fixed trbl0', modalObj.isShow ? 'op10' : 'op0 dn', modalObj.animate ? 'trans3' : '']" 
      :style="{background:'rgba(55,55,55,.6)', zIndex: zIndex}"
    >
    </div>
    <!---弹框-->
    <div
      :class="[
        'fixed bgf rds15',
        modalObj.isShow ? `op10 ${modalObj.animate ? 'ani-large' : ''}` : `op0 ${modalObj.animate ? 'ani-small' : ''}`, 
        modalObj.footer && modalObj.footer.isShow ? 'pb52' : '',
      ]"
      :style="`transition: transform ease 0.3s;z-index:${modalObj.isShow ? zIndex + 1 : -1};${modalObj.style};padding-top: ${modalObj.header && modalObj.header.isShow ? 'clamp(45px, 0.5rem, 50px);' : ''};box-shadow: 0 4px 12px rgba(0,0,0,.15);left:${modalObj.left};top:${modalObj.top};width:${modalObj.width};`"
    >
      <!--顶部标题-->
      <template v-if="modalObj.footer">
        <div
          v-if="modalObj.header.isShow"
          class="f ac pl10 abs t0 l0 r0"
          style="height:clamp(45px, 0.5rem, 50px);background:#f5f7fa;border-radius: 15px 15px 0 0;"
          v-draggable="[modalObj.draggable, 'parent']"
        >
          <div class="fs16 b f1 none pl20">{{modalObj.header.title}}</div>
          <div @click.stop="closeModal" v-if="modalObj.header.isShowClose" class="f ac xc poi" style="height:clamp(45px, 0.5rem, 50px);width:50px;"><svg t="1671764723022" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2737" width="12" height="12"><path d="M1007.603202 929.818395L592.684241 514.699473 1007.603202 99.780512c10.797891-10.797891 16.196837-24.795157 16.196837-38.992385 0-13.997266-5.398946-28.194493-16.196837-38.992384-21.595782-21.595782-56.388987-21.595782-77.984768 0L514.699473 436.914665 99.780512 21.795743C78.18473 0.199961 43.391525 0.199961 21.795743 21.795743s-21.595782 56.388987 0 77.984769l415.118922 414.918961L21.795743 929.818395c-21.595782 21.595782-21.595782 56.388987 0 77.984768s56.388987 21.595782 77.984769 0l414.918961-415.118922L929.818395 1007.603202c10.797891 10.797891 24.795157 16.196837 38.992384 16.196837 13.997266 0 28.194493-5.398946 38.992384-16.196837 21.395821-21.395821 21.395821-56.388987-0.199961-77.784807z" fill="#999999" p-id="2738"></path></svg></div>
        </div>
      </template>
      <!--内容-->
      <div class="rel">
        <slot></slot>
      </div>
      <!--底部按钮-->
      <template v-if="modalObj.footer">
        <div v-if="modalObj.footer.isShow" :class="['abs b0 l0 r0 f ac pt10 pl20 pr20 pb10 rds15 borderBox none', modalObj.footer.align == 'left' ? 'xs' : modalObj.footer.align == 'center' ? 'xc' :'xe' ]" style="height:52px;background:#f5f7fa;border-radius:0 0 15px 15px;">
          <div v-if="modalObj.footer.isShowClose" @click.stop="handleClose" class="gec6102 poi rds20 mr20 f ac xc fs14 pl10 pr10" style="border:1px solid #ec6102;min-width:80px;height:32px;">{{modalObj.footer.closeText || '关闭'}}</div>
          <div v-if="modalObj.footer.isShowCancel" @click.stop="handleCancel" class="gec6102 poi mr20 rds20 f ac xc fs14 pl10 pr10" style="border:1px solid #ec6102;min-width:80px;height:32px;">{{modalObj.footer.cancelText || '取消'}}</div>
          <div v-if="modalObj.footer.isShowConfirm" @click.stop="handleConfirm" class="gf poi rds20 f ac xc fs14 pl10 pr10" style="background:#ec6102;border:1px solid #ec6102;min-width:80px;height:32px;">{{modalObj.footer.confirmText || '确定'}}</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import f from "./index.js"
export default {
  components: { },
  props: {
    modalObj: { type: Object, default: () => ({})},
  },
  emits: ['close', 'cancel', 'confirm', 'setModalObj'],
  setup(props, { emit }) {
    return f(props, emit)
  }
}
</script>
<style src="./index.css" scoped></style>

